<template>
    <div class="form-item-box">
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="groupName=!groupName">
                <i class="group-icon" :class="groupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span v-text="formItem.label"/>
            </li>
            <ul class="inner-box" :class="{'h0': !groupName}">
                <li class="attr-item">
                    <div class="attr-item-label">标题</div>
                    <div class="block">
                        <el-input v-model="formItem.label" size="mini" type="text"/>
                    </div>
                </li>
                <li class="attr-item ">
                    <div class="attr-item-label">输入说明</div>
                    <div class="block">
                        <el-input v-model="formItem.placeholder" size="mini" type="text"/>
                    </div>
                </li>
                <li class="attr-item ">
                    <div class="attr-item-label">错误提示</div>
                    <div class="block">
                        <el-input v-model="formItem.error" size="mini" type="text"/>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">表单类型</div>
                    <div class="block">
                        <el-select v-model="formItem.type" size="mini" style="width: 100%;" placeholder="请选择表单类型">
                            <el-option v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"/>
                        </el-select>
                    </div>
                </li>
                <li class="attr-item user-select-none">
                    <el-checkbox v-model="formItem.required">必填</el-checkbox>
                    <div class="item-option-box">
                        <el-tooltip class="item" effect="dark" content="升序" placement="top-start">
                            <font v-if="index!==0"
                                  class="option-btn my-icon-sort-up"
                                  @click="sortFormItem('up');"/>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="降序" placement="top-end">
                            <font v-if="index!==length-1"
                                  class="option-btn my-icon-sort-down"
                                  @click="sortFormItem('down');"/>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除当前项" placement="top-start">
                            <font class="option-btn delete-item"
                                  @click="delFormItem();"/>
                        </el-tooltip>
                    </div>
                </li>
            </ul>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'FormItem',
        props: {
            index: {
                type: Number,
                required: true,
                default: 0
            },
            length: {
                type: Number,
                required: true,
                default: 0
            },
            formItem: {
                type: Object,
                default: _ => {
                    return {
                        type: '',
                        label: '',
                        error: '',
                        placeholder: '',
                        required: false
                    };
                }
            }
        },
        data() {
            return {
                groupName: true,
                options: [
                    {
                        value: 'text',
                        label: '文本'
                    },
                    {
                        value: 'email',
                        label: '邮箱'
                    },
                    {
                        value: 'number',
                        label: '数字'
                    }
                ]
            };
        },
        methods: {
            delFormItem() {
                this.$parent.content.formItem.splice(this.index, 1);
            },
            sortFormItem(flag) {
                let formItem = this.$parent.content.formItem;
                let i = this.index;
                let tmpArr = formItem.splice(i, 1);
                if (flag === 'up') {
                    if (this.index !== 0) {
                        formItem.splice(--i, 0, ...tmpArr);
                    }
                } else if (flag === 'down') {
                    if (this.index !== this.length - 1) {
                        formItem.splice(++i, 0, ...tmpArr);
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .form-item-box {
        @import '../../../styles/init';
        width: 100%;
        overflow: hidden;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .outer-box {
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .group-attribute-name {
                height: 20px;
                width: fit-content;
                user-select: none;
                color: #999;
                cursor: pointer;

                .group-icon {
                    font-size: 18px;
                }
            }
            .inner-box {
                height: 285px;
                overflow: hidden;
                transition: height .2s;

                .attr-item {
                    margin-top: 10px;
                    .attr-item-label {
                        margin-bottom: 10px;
                    }
                }
                .user-select-none {
                    user-select: none;
                }
                .item-option-box {
                    float: right;
                    .option-btn {
                        cursor: pointer;
                        outline: none;
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                    }
                    .option-btn.my-icon-sort-up {
                        background: url("./imgs/sort-up.png") center no-repeat;
                        background-size: 20px;
                    }
                    .option-btn.my-icon-sort-down {
                        background: url("./imgs/sort-down.png") center no-repeat;
                        background-size: 20px;
                    }
                    .option-btn.delete-item {
                        background: url("./imgs/delete-item.png") center no-repeat;
                        background-size: 20px;
                    }
                }
            }
        }
    }
</style>
